<aside class="side-right">
    <!-- sidebar-right -->
    <div class="sidebar-right">
        <!--sidebar-right-header-->
        <div class="sidebar-right-header">
            Ws implemeted chat
        </div>
        <!--/sidebar-right-header-->
        <!--sidebar-right-control-->
        <div class="sidebar-right-control">
            <ul class="sr-control-item">
                <li class="active"><a href="#contact" data-toggle="tab" title="contacts"><i
                        class="icofont-group"></i></a></li>
            </ul>
        </div>
        <!-- /sidebar-right-control-->
        <!-- sidebar-right-content -->
        <div class="sidebar-right-content">
            <div class="tab-content">

                <!--chat-->
                <div class="tab-pane fade" id="chat">
                    <div class="side-chat">
                        <!--header part-->
                        <div class="chat-header">

                            <div class="chat-action">
                                <div class="btn-group pull-right">
                                    <a href="#contact" data-toggle="tab" title="close"><i
                                            class="icofont-remove-sign pull-right"></i></a>
                                </div>
                            </div>
                            <h5><i class="icofont-certificate color-green"></i> Jane smith</h5>
                        </div>
                        <!--content part-->

                    </div>
                    <div class="divider-content"><span></span></div>
                </div>
                <!--chat-->
                <script type="text/javascript">
                    $(function () {
                        console.log("ready chat call");
                        $.get("@{chat.ChatController.listMembers()}", {}, function (data, textStatus, jqXHR) {
                            console.log(data);
                            console.log(textStatus);
                            console.log(jqXHR);
                            $(data).each(function (index, val) {
                                console.log(val);
                                $("#contact-list").append("" +
                                        "<li class='contact-alt grd-white'>" +
                                        "<a href='#'>" +
                                        "<div class='contact-item'>" +
                                        "<div class='pull-left'>" +
                                        "<img class='contact-item-object' style='width: 32px;height: 32px;' src='/public/img/user-thumb-mini.jpg'>" +
                                        "</div>" +
                                        "<div class='contact-item-body'>" +
                                        "<div class='status' title='busy'><i id='status_" + val.name + "' class='icofont-certificate color-" + val.status + "'></i></div>" +
                                        "<p class='contact-item-heading bold'>" + val.name + "</p>" +
                                        "<p class='help-block'><small class='muted'>project user</small></p>" +
                                        "</div>" +
                                        "</div>" +
                                        "</a>" +
                                        "</li>");
                            })
                        }, "json");
                    });

                    function setStatus(statusColor) {
                        $.post("@{chat.ChatController.changeStatus()}", {status: statusColor}, function (data, textStatus, jqXHR) {
                        }, "json");
                    }

                </script>
                <!--contact-->
                <div class="tab-pane fade active in" id="contact">
                    <div class="side-contact">
                        <!--contact-control-->
                        <div class="contact-control">
                            <div class="btn-group pull-right">
                                <button class="dropdown-toggle bg-transparent no-border" data-toggle="dropdown">
                                    <i class="icofont-caret-down"></i>
                                </button>
                                <ul class="dropdown-menu">
                                    <li><span onclick="setStatus('ONLINE')" style="cursor: pointer"><i
                                            class="icofont-certificate color-green"></i> Online</span></li>
                                    <li><span onclick="setStatus('IDLE')" style="cursor: pointer"><i
                                            class="icofont-certificate color-orange"></i> Idle</span></li>
                                    <li><span onclick="setStatus('BUSY')" style="cursor: pointer"><i
                                            class="icofont-certificate color-red"></i> Busy</span></li>
                                </ul>
                            </div>
                            <h5 id="chat-username"><i class="icofont-comment color-green"></i></h5>
                        </div>
                        <!--/contact-control-->

                        <!--contact-list, we set this max-height:380px, you can set this if you want-->
                        <ul class="contact-list" id="contact-list">

                        </ul>
                        <!--/contact-list-->
                    </div>
                </div>
                <!--/contact-->

            </div>
        </div>
        <!-- /sidebar-right-content -->
    </div>
    <!-- /sidebar-right -->
</aside>
